<template>
  <div class="entry_page">
      <div class="top">
          <img src="https://jialianxin-1301053941.cos.ap-chengdu.myqcloud.com/new_saas/gy/d8.png" alt="" @click="back()">
          <div class="title">进件米糠机</div>
      </div>
      <div class="inp_name">
          <div class="title">姓名:</div>
          <input type="text" placeholder="请输入您的姓名" v-model="name">
      </div>
      <div class="inp_phone">
          <div class="title">电话:</div>
          <input type="number" placeholder="请输入您的电话" v-model="phone">
      </div>
      <div class="inp_shop">
          <div class="title">店铺名称:</div>
          <input type="text"  placeholder="请输入您的店铺名称" v-model="shopNmae">
      </div>
      <div class="inp_shop">
          <div class="title">店铺地址:</div>
          <input type="text"  placeholder="请输入您的店铺所在地址" v-model="address">
      </div>
      <div class="inp_yz">
          <div class="title">营业执照许可证号:</div>
          <input type="number" placeholder="请输入您店铺营业执照许可证号" v-model="shop_xkz">
      </div>
      <div class="inp_type">
          <div class="title">营业类型:</div>
           <div class="right" @click="showPickers">
              <span>{{y_type}}</span>
              <img src="../../assets/perfromImg/5.png" alt="">
          </div>
      </div>
      <div class="reson_box">
          <div class="title">申请理由:</div>
           <textarea v-model="txt" placeholder="请填写您的申请理由" class="remarks-text"></textarea>
            <span class="words-num">{{ txt.length }}/{{txtlenght}}</span>
      </div>
       <div class="submit" @click="submit">立即提交</div>

       <van-popup v-model="showClassPicker" position="bottom">
           <van-picker show-toolbar :columns="countList" value-key='name'  @confirm="onClassConfirm" @cancel="showClassPicker = false"/>
        </van-popup>
  </div>
</template>

<script>
import { Picker,Toast} from 'vant'
import {tyData,tysData} from '../../sever/request'
export default {
     components: {
        vanPicker: Picker,
         VanToast:Toast
    },
    data() {
        return {
            name:'',
            phone:'',
            shopNmae:'',
            shop_xkz:'',
            y_type:'请选择',
            txt: "",
            txtlenght: 300,
            reson:'', 
            showClassPicker:false,
            countList:[],
            y_id:null,
             shop_id:905,
            token:"f692045c-bcb2-4aaa-b114-6b4e8521ab40",
            address:''
        }
    },
     created() {
        let store = this.$route.query;
        if (store.shop_id != undefined) {
        this.shop_id = store.shop_id;
        }
        if (store.token != "" && store.token != undefined) {
        this.token = store.token;
        }
        this.getData()
    },
    methods: {
         back(){
            // uni.navigateBack();
          this.$router.go(-1)

        },
        getData(){
            tyData({
                 token: this.token,
                  shop_id:this.shop_id,
            }).then((res=>{
                if(res.data.code==1){
                    this.countList=res.data.data
                }
            })) 
        },
        showPickers(){
             this.showClassPicker=true
        },
        onClassConfirm(v){
            this.y_type=v.name
            this.y_id=v.id
            this.showClassPicker = false;
        },
        submit(){
            if(this.txt.length>=301){
                this.$toast({
                     message:'申请理由不能超过300字'
                  })
                  return
            }
            if(this.username==''){
                 this.$toast({
                     message:'姓名不能为空'
                  })
                  return
            }
            if(this.phone==''){
                 this.$toast({
                     message:'电话不能为空',
                  })
                  return
            }
            if(this.shop_name==''){
                 this.$toast({
                     message:'店铺名不能为空',
                  })
                  return
            }
            tysData({
                  token: this.token,
                  shop_id:this.shop_id,
                  username:this.name,
                  phone:this.phone,
                  address:this.address,
                  license_sn:this.shop_xkz,
                  manystore_type_id:this.y_id,
                  reason:this.txt,
                  shop_name:this.shopNmae
            }).then((res)=>{
                if(res.data.code==1){
                    this.$toast({
                     message:'提交成功，等待后台审核！'
                  })
                }else{
                     this.$toast({
                     message:res.data.msg
                  })
                }
            })
        }
    },
}
</script>
<style lang="less" scoped>
    .entry_page{
        width: 10rem;
        .top{
            width: 10rem;
            height: 1.5rem;
            background: #fff;
            padding-top: .933333rem;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin-bottom: .4rem;
            img{
                margin-left: .4rem;
                width: .24rem;
                height: .426667rem;
            }
            .title{
                font-size: .4rem;
                color: #333;
                margin-left: 3.6rem;
            }
        }
        .inp_name,.inp_phone,.inp_shop,.inp_yz{
            width: 10rem;
            height: 1.2rem;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: .013333rem solid #ccc;
            .title{
                font-size: .373333rem;
                color: #333;
                margin-left: .266667rem;
            }
            input{
                border: none;
                margin-right: .266667rem;
            }
        }
        .inp_type{
            width: 10rem;
            height: 1.2rem;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: .013333rem solid #ccc;
            .title{
                font-size: .373333rem;
                color: #333;
                margin-left: .266667rem; 
            }
            .right{
                margin-right: .266667rem;
                span{
                    font-size: .373333rem;
                    color: #333;
                    margin-right: .266667rem;
                }
                img{
                      width: .4rem;
                      height: .3rem;
                }
            }
        }
        .reson_box{
                width: 10rem;
               
                padding: 0.4rem 0.266667rem;
                box-sizing: border-box;
                background-color: white;
                border-radius: 0.266667rem;
                position: relative;
                .title{
                      font-size: .373333rem;
                      color: #333;
                      font-weight: bold;
                }
                .remarks-text {
                    min-width: 8.933333rem;
                    max-width: 8.933333rem;
                    min-height: 4.533333rem;
                    max-height: 4.533333rem;
                    border: 0;
                     margin-top: .4rem;
                }
                .remarks-text::placeholder {
                    color: #333;
                }
                .words-num {
                    position: absolute;
                    bottom: 0.4rem;
                    right: 0.4rem;
                    color: #ccc;
                    font-size: 0.32rem;
                }
        }
        .submit{
            width: 9.066667rem;
            height: 1.066667rem;
            border-radius: .266667rem;
            margin: .8rem auto 0;
            background-color: #0EB173;
            font-size: .373333rem;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    }
</style>